import Layouts from '@/src/components/Layouts'
import React, { useState, useEffect } from 'react'
import { Card, Button, Table, Space, Popconfirm, message } from "antd"
import Paginations from '@/src/components/Pagination'
import http from '@/src/utils/https'
import OrderSearch from '@/src/components/OrderSearch'
const Order = () => {
  //分页
  let [page, setPage] = useState(1);
  let [pagesize, SetpageSize] = useState(10);
  let [total, SetTotal] = useState(100);
  const handelpage = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "page")
    setPage(page)
    SetpageSize(pagesize)
  }
  const handelsize = (page: number, pagesize: number) => {
    // console.log(page, pagesize, "size")
    setPage(page)
    SetpageSize(pagesize)
  }
  //模糊搜素
  const handelsearch = (val: any) => {
    console.log(val)
    getOrderList(val)
  }
  let [orderList, setOrderlist] = useState([] as any)
  let [orderLists, setOrderlists] = useState([] as any)
  //请求数据
  let [timer, setTimer] = useState(false)
  const getOrderList = (obj = {}) => {
    if (timer) return
    http.get("/order", { params: obj }).then(res => {
      if (res.data.code == 200) {
        setOrderlist(res.data.data)
        SetTotal(res.data.data.length)
      }
      setTimer(false)
    })
    setTimer(true)
  }
  //初始化请求数据
  useEffect(() => {
    if (orderList.length <= 0) {
      getOrderList()
    }
  }, [])
  //处理渲染数据
  useEffect(() => {
    if (orderList.length > 0) {
      let newList = orderList.slice((page - 1) * pagesize, page * pagesize).map((item: any) => {
        item.key = item.id
        return item
      })
      setOrderlists(newList)
    }
  }, [orderList, page, pagesize])


  //删除
  const handelete = async(id:any) =>{
    let res = await http.delete("/del/order",{params:{id}})
    if(res.data.code==200){
      getOrderList()
    }
  }
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      width: 70
    },
    {
      title: '编号',
      dataIndex: 'serial',
      key: 'serial',
      width: 100
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      width: 100
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
      width: 100
    },
    {
      title: '订单类型',
      dataIndex: 'type',
      key: 'type',
      width: 90
    },
    {
      title: '支付金额',
      dataIndex: 'price',
      key: 'price',
      width: 100,
      render(_:any,item:any){
          return <span>{item.price}/元</span>
      }
    },
    {
      title: '时间',
      dataIndex: 'date',
      key: 'date',
      width: 120
    },{
      title: '操作',
      dataIndex: 'edit',
      key: 'edit',
      width: 100,
      render(_:any,item:any){
          return <Button type="link"
          onClick={()=>handelete(item.id)}
          >删除</Button>
      }
    },
  ] as any;

  return (
    <Layouts>
      <Card style={{ width: "100%" }} bordered={false}>
        <h2>订单管理</h2>
      </Card>
      <Card style={{ width: "100%" }} bordered={false} title="搜索">
        <OrderSearch handelsearch={handelsearch}></OrderSearch>
      </Card>
      <Card style={{ width: "100%" }} bordered={false}>
        {/* 内容 */}
        {
          orderList.length > 0 &&
          <Table scroll={{ y: 540 }} style={{ height: 540, marginBottom: "10px" }} dataSource={orderLists} columns={columns} pagination={false} />
        }
      </Card>
      <Card bordered={false} style={{ width: '100%', position: "sticky", left: "0", bottom: "0", zIndex: "9", minWidth: "800px", borderTop: "1px solid #ccc" }}>
        <Paginations total={total} page={page} pagesize={pagesize} onpage={handelpage} onsize={handelsize}></Paginations>
      </Card>
    </Layouts>
  )
}

export default Order